<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue.js 的 Hello world</title>
</head>
<body>
	<!-- 在此 div 内部，使用双花括号 {{msg}} 来展示 Vue 实例中名为 "msg" 的数据的值 -->
	<!-- {{ }} 不属于 Vue 的指令表达式，它是 Vue 中的插值表达式。
		插值表达式用于在模板中显示 Vue 实例中定义的数据。
		当 Vue 实例中的对应数据发生变化时，插值表达式中的内容会自动更新。 -->
    <div id="app"> {{msg}}</div>
    <script src="../js/vue.js"></script>     
    <script type="text/javascript">
        // 1、创建 Vue 实例
        var vm = new Vue({ 
            // el 选项用于指定 Vue 实例要管理的 DOM 元素。
			//DOM（Document Object Model，文档对象模型） 是一种用于 HTML 和 XML 文档的编程接口。
			//它将文档表示为一个由节点和对象组成的结构树。
			//DOM 允许程序和脚本动态地访问、修改文档的内容、结构和样式。
			//通过 DOM，可以使用编程语言（如 JavaScript）来操作网页中的元素，
			//例如获取元素、修改元素的属性（如文本内容、样式、类名等）、添加或删除元素、
			//响应用户的交互事件等。
            //这里通过选择器 '#app' 找到具有该 id 的 DOM 元素，
            //并将此元素及其内部的内容交给 Vue 实例进行管理和渲染
            el: '#app', 
            data: { 
                // data 选项用于定义 Vue 实例中的数据。
                // 这些数据将在模板中被使用和展示，
                // 并且当数据发生变化时，会自动更新相关的视图
                msg: 'Hello world!' 
            }
        });
    </script>
</body>
</html>